<!-- 新增角色弹窗线框 -->
<div class="modal-mask" style="position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.18);z-index:1002;display:flex;align-items:center;justify-content:center;">
  <div class="modal-dialog" style="width:520px;background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(80,60,180,0.10);padding:0 0 24px 0;max-height:90vh;overflow-y:auto;">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 32px 12px 32px;border-bottom:1px solid #f0f0f0;">
      <span style="font-size:1.3rem;font-weight:bold;">新增角色</span>
      <span style="font-size:1.5rem;color:#bbb;cursor:pointer;">×</span>
    </div>
    <form style="padding:0 32px;">
      <div style="margin:24px 0 0 0;display:flex;align-items:center;gap:12px;">
        <span style="color:#f56c6c;font-size:1.1rem;">*</span>
        <label style="width:80px;color:#888;text-align:right;">角色名称</label>
        <input type="text" placeholder="请输入角色名称" maxlength="50" style="flex:1;background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:6px 12px;" />
        <span style="color:#bbb;font-size:0.95rem;">0/50</span>
      </div>
      <div style="margin:18px 0 0 0;display:flex;align-items:center;gap:12px;">
        <label style="width:80px;color:#888;text-align:right;">角色编码</label>
        <input type="text" placeholder="输入角色编码（英文字母、数字、下划线）" style="flex:1;background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:6px 12px;" />
      </div>
      <div style="margin:18px 0 0 0;display:flex;align-items:center;gap:12px;">
        <span style="color:#f56c6c;font-size:1.1rem;">*</span>
        <label style="width:80px;color:#888;text-align:right;">状态</label>
        <label style="display:flex;align-items:center;gap:8px;font-size:1rem;">
          <input type="radio" name="status" checked style="accent-color:#6a9cfb;" /> 启用
        </label>
        <label style="display:flex;align-items:center;gap:8px;font-size:1rem;">
          <input type="radio" name="status" style="accent-color:#bbb;" /> 禁用
        </label>
      </div>
      <div style="margin:18px 0 0 0;display:flex;align-items:flex-start;gap:12px;">
        <label style="width:80px;color:#888;text-align:right;">描述</label>
        <textarea placeholder="请输入角色描述" style="flex:1;min-height:60px;max-height:120px;background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:8px 12px;font-size:1rem;resize:vertical;"></textarea>
        <span style="color:#bbb;font-size:0.95rem;align-self:flex-end;">0/200</span>
      </div>
      <div style="display:flex;justify-content:flex-end;gap:12px;margin-top:32px;">
        <button type="button" style="background:#f6f7fb;color:#888;border:none;border-radius:8px;padding:8px 28px;font-size:1rem;cursor:pointer;">取消</button>
        <button type="submit" style="background:#6a9cfb;color:#fff;border:none;border-radius:8px;padding:8px 28px;font-size:1rem;font-weight:bold;cursor:pointer;">确定</button>
      </div>
    </form>
  </div>
</div>
<!-- 编辑角色弹窗线框 -->
<div class="modal-mask" style="position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.18);z-index:1001;display:flex;align-items:center;justify-content:center;">
  <div class="modal-dialog" style="width:520px;background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(80,60,180,0.10);padding:0 0 24px 0;max-height:90vh;overflow-y:auto;">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 32px 12px 32px;border-bottom:1px solid #f0f0f0;">
      <span style="font-size:1.3rem;font-weight:bold;">编辑角色</span>
      <span style="font-size:1.5rem;color:#bbb;cursor:pointer;">×</span>
    </div>
    <form style="padding:0 32px;">
      <div style="margin:24px 0 0 0;display:flex;align-items:center;gap:12px;">
        <span style="color:#f56c6c;font-size:1.1rem;">*</span>
        <label style="width:80px;color:#888;text-align:right;">角色名称</label>
        <input type="text" value="普通用户" maxlength="50" style="flex:1;background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:6px 12px;" />
        <span style="color:#bbb;font-size:0.95rem;">4/50</span>
      </div>
      <div style="margin:18px 0 0 0;display:flex;align-items:center;gap:12px;">
        <label style="width:80px;color:#888;text-align:right;">角色编码</label>
        <input type="text" value="regular_user" style="flex:1;background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:6px 12px;" />
      </div>
      <div style="margin:18px 0 0 0;display:flex;align-items:center;gap:12px;">
        <span style="color:#f56c6c;font-size:1.1rem;">*</span>
        <label style="width:80px;color:#888;text-align:right;">状态</label>
        <label style="display:flex;align-items:center;gap:8px;font-size:1rem;">
          <input type="radio" name="status" checked style="accent-color:#6a9cfb;" /> 启用
        </label>
        <label style="display:flex;align-items:center;gap:8px;font-size:1rem;">
          <input type="radio" name="status" style="accent-color:#bbb;" /> 禁用
        </label>
      </div>
      <div style="margin:18px 0 0 0;display:flex;align-items:flex-start;gap:12px;">
        <label style="width:80px;color:#888;text-align:right;">描述</label>
        <textarea style="flex:1;min-height:60px;max-height:120px;background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:8px 12px;font-size:1rem;resize:vertical;">普通用户，拥有基础功能权限</textarea>
        <span style="color:#bbb;font-size:0.95rem;align-self:flex-end;">13/200</span>
      </div>
      <div style="display:flex;justify-content:flex-end;gap:12px;margin-top:32px;">
        <button type="button" style="background:#f6f7fb;color:#888;border:none;border-radius:8px;padding:8px 28px;font-size:1rem;cursor:pointer;">取消</button>
        <button type="submit" style="background:#6a9cfb;color:#fff;border:none;border-radius:8px;padding:8px 28px;font-size:1rem;font-weight:bold;cursor:pointer;">确定</button>
      </div>
    </form>
  </div>
</div>
<!-- 角色详情弹窗线框 -->
<div class="modal-mask" style="position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.18);z-index:1000;display:flex;align-items:center;justify-content:center;">
  <div class="modal-dialog" style="width:820px;background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(80,60,180,0.10);padding:0 0 24px 0;max-height:90vh;overflow-y:auto;">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:24px 32px 12px 32px;border-bottom:1px solid #f0f0f0;">
      <span style="font-size:1.3rem;font-weight:bold;">角色详情</span>
      <span style="font-size:1.5rem;color:#bbb;cursor:pointer;">×</span>
    </div>
    <div style="padding:0 32px;">
      <!-- 基本信息 -->
      <div style="margin:24px 0 0 0;">
        <div style="font-size:1.1rem;font-weight:bold;margin-bottom:12px;display:flex;align-items:center;gap:8px;">
          <span style="color:#232946;">●</span> 基本信息
        </div>
        <div style="display:grid;grid-template-columns:120px 1fr 120px 1fr;gap:12px 18px;align-items:center;">
          <div style="color:#888;text-align:right;">角色名称</div>
          <div>数据分析师</div>
          <div style="color:#888;text-align:right;">角色编码</div>
          <div><input type="text" value="data_analyst" disabled style="width:100%;background:#f6f7fb;border:1px solid #e0e0e0;border-radius:6px;padding:4px 8px;"/></div>
          <div style="color:#888;text-align:right;">状态</div>
          <div><span style="color:#3ecf8e;background:#e8f5e9;padding:2px 12px;border-radius:8px;font-size:0.98rem;">启用</span></div>
          <div style="color:#888;text-align:right;">用户数</div>
          <div>0</div>
          <div style="color:#888;text-align:right;">创建时间</div>
          <div>2025-07-30 14:42:02</div>
          <div style="color:#888;text-align:right;">描述</div>
          <div>数据分析师，专注数据分析相关功能</div>
        </div>
      </div>
      <!-- 权限信息 -->
      <div style="margin:32px 0 0 0;">
        <div style="font-size:1.1rem;font-weight:bold;margin-bottom:12px;display:flex;align-items:center;gap:8px;">
          <span style="color:#232946;">●</span> 权限信息
          <button style="margin-left:16px;background:#6a9cfb;color:#fff;border:none;border-radius:6px;padding:4px 16px;font-size:0.98rem;cursor:pointer;">编辑权限</button>
        </div>
        <div style="background:#f6f7fb;border-radius:8px;padding:16px 12px;display:flex;flex-wrap:wrap;gap:8px;">
          <span style="background:#e7eaf6;color:#6a9cfb;border-radius:6px;padding:4px 10px;font-size:0.98rem;">实时接收仪表盘</span>
          <span style="background:#e7eaf6;color:#6a9cfb;border-radius:6px;padding:4px 10px;font-size:0.98rem;">个人资料查看</span>
          <span style="background:#e7eaf6;color:#6a9cfb;border-radius:6px;padding:4px 10px;font-size:0.98rem;">数据分析仪表盘</span>
          <span style="background:#e7eaf6;color:#6a9cfb;border-radius:6px;padding:4px 10px;font-size:0.98rem;">仪表盘查看</span>
          <span style="background:#e7eaf6;color:#6a9cfb;border-radius:6px;padding:4px 10px;font-size:0.98rem;">系统监控</span>
          <span style="background:#e7eaf6;color:#6a9cfb;border-radius:6px;padding:4px 10px;font-size:0.98rem;">查看用户列表</span>
          <span style="background:#e7eaf6;color:#6a9cfb;border-radius:6px;padding:4px 10px;font-size:0.98rem;">查看系统日志</span>
          <span style="background:#e7eaf6;color:#6a9cfb;border-radius:6px;padding:4px 10px;font-size:0.98rem;">查看角色列表</span>
          <span style="background:#e7eaf6;color:#6a9cfb;border-radius:6px;padding:4px 10px;font-size:0.98rem;">更新个人信息</span>
          <span style="background:#e7eaf6;color:#6a9cfb;border-radius:6px;padding:4px 10px;font-size:0.98rem;">图表查看</span>
          <span style="background:#e7eaf6;color:#6a9cfb;border-radius:6px;padding:4px 10px;font-size:0.98rem;">实时数据分析</span>
        </div>
      </div>
      <!-- 关联用户 -->
      <div style="margin:32px 0 0 0;">
        <div style="font-size:1.1rem;font-weight:bold;margin-bottom:12px;display:flex;align-items:center;gap:8px;">
          <span style="color:#232946;">●</span> 关联用户 <span style="color:#bbb;font-size:0.98rem;">(0)</span>
        </div>
        <div style="height:80px;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:1.1rem;">
          <svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" rx="12" fill="#f6f7fb"/><path d="M24 28c-4.418 0-8 1.79-8 4v2h16v-2c0-2.21-3.582-4-8-4Zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" fill="#e0e0e0"/></svg>
          <span style="margin-left:16px;">暂无关联用户</span>
        </div>
      </div>
      <!-- 操作按钮 -->
      <div style="display:flex;justify-content:flex-end;gap:12px;margin-top:32px;">
        <button style="background:#f6f7fb;color:#888;border:none;border-radius:8px;padding:8px 28px;font-size:1rem;cursor:pointer;">关闭</button>
        <button style="background:#6a9cfb;color:#fff;border:none;border-radius:8px;padding:8px 28px;font-size:1rem;font-weight:bold;cursor:pointer;">编辑角色</button>
      </div>
    </div>
  </div>
</div>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>角色管理 - 线框图原型</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #f6f7fb;
      font-family: Arial, sans-serif;
    }
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      width: 220px;
      height: 100vh;
      background: #232946;
      color: #fff;
      display: flex;
      flex-direction: column;
      padding: 24px 0 0 0;
      box-sizing: border-box;
    }
    .sidebar .logo {
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 32px;
      letter-spacing: 2px;
    }
    .sidebar .menu {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0 0 0 24px;
    }
    .sidebar .menu .menu-item {
      padding: 10px 0;
      border-radius: 6px 0 0 6px;
      cursor: pointer;
      color: #bfc8e2;
      font-size: 1rem;
    }
    .sidebar .menu .menu-item.active {
      background: #e7eaf6;
      color: #232946;
      font-weight: bold;
    }
    .main {
      margin-left: 220px;
      min-height: 100vh;
      background: #f6f7fb;
    }
    .header {
      background: linear-gradient(90deg, #a084ee 0%, #6a9cfb 100%);
      color: #fff;
      padding: 24px 32px 16px 32px;
      font-size: 1.3rem;
      font-weight: bold;
      letter-spacing: 1px;
    }
    .breadcrumb {
      color: #888;
      font-size: 0.95rem;
      margin: 8px 0 0 32px;
    }
    .content {
      margin: 24px 32px 0 32px;
    }
    .section {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(80, 60, 180, 0.06);
      padding: 24px;
      margin-bottom: 24px;
    }
    .section-title {
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 16px;
    }
    .filter-row {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;
    }
    .filter-input, .filter-select {
      padding: 8px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 1rem;
      background: #f6f7fb;
    }
    .btn {
      padding: 8px 18px;
      border-radius: 6px;
      border: none;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      margin-left: 8px;
    }
    .btn-primary {
      background: linear-gradient(90deg, #a084ee 0%, #6a9cfb 100%);
      color: #fff;
    }
    .btn-danger {
      background: #f56c6c;
      color: #fff;
    }
    .quick-filter {
      margin: 8px 0 0 0;
      display: flex;
      gap: 12px;
    }
    .quick-btn {
      background: #f3f0fa;
      color: #a084ee;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 0.95rem;
      cursor: pointer;
    }
    .stats-row {
      display: flex;
      gap: 24px;
      margin-bottom: 24px;
    }
    .stat-card {
      flex: 1;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(80, 60, 180, 0.06);
      padding: 24px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-width: 0;
    }
    .stat-title {
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .stat-value {
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: 4px;
    }
    .stat-desc {
      color: #888;
      font-size: 0.95rem;
    }
    .table-section {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(80, 60, 180, 0.06);
      padding: 24px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 12px;
    }
    th, td {
      border: 1px solid #e0e0e0;
      padding: 10px 8px;
      text-align: left;
      font-size: 1rem;
    }
    th {
      background: #f6f7fb;
      font-weight: bold;
    }
    .table-actions button {
      margin-right: 8px;
      padding: 4px 10px;
      border-radius: 4px;
      border: none;
      font-size: 0.95rem;
      cursor: pointer;
    }
    .table-actions .edit {
      background: #a084ee;
      color: #fff;
    }
    .table-actions .delete {
      background: #f56c6c;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <div class="logo">SG3L</div>
    <div class="menu">
      <div class="menu-item">分析页</div>
      <div class="menu-item">仪表盘</div>
      <div class="menu-item">监控页</div>
      <div class="menu-item">模板中心</div>
      <div class="menu-item">组件中心</div>
      <div class="menu-item">日志中心</div>
      <div class="menu-item">权限管理</div>
      <div class="menu-item">用户管理</div>
      <div class="menu-item active">角色管理</div>
    </div>
  </div>
  <div class="main">
    <div class="header">角色管理</div>
    <div class="breadcrumb">首页 / 角色管理</div>
    <div class="content">
      <div class="section" style="background:#f8fafc;border-radius:16px;padding:24px 32px 18px 32px;box-shadow:none;margin-bottom:18px;">
        <div style="display:flex;align-items:center;gap:18px;margin-bottom:18px;">
          <div style="flex:1;display:flex;gap:16px;">
            <input class="filter-input" type="text" placeholder="搜索角色名称、编码或描述" style="flex:1;min-width:180px;" />
            <input class="filter-input" type="text" placeholder="请输入角色编码" style="width:180px;" />
            <select class="filter-select" style="width:160px;">
              <option>请选择状态</option>
              <option>启用</option>
              <option>禁用</option>
            </select>
          </div>
          <button class="btn btn-primary" style="margin-left:12px;">搜索</button>
          <button class="btn" style="margin-left:0;">重置</button>
        </div>
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px;">
          <span style="color:#888;font-size:1rem;">快速筛选:</span>
          <button class="quick-btn">启用角色</button>
          <button class="quick-btn">禁用角色</button>
        </div>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;">
        <div style="font-size:1.15rem;font-weight:bold;color:#232946;">角色统计概览</div>
        <span style="color:#bbb;font-size:0.98rem;">最后更新: 17:10:48</span>
      </div>
      <div class="stats-row" style="gap:32px;">
        <div class="stat-card" style="background:#fff;position:relative;">
          <div style="position:absolute;left:24px;top:24px;font-size:2.2rem;color:#a084ee;"><span>👤</span></div>
          <div style="margin-left:64px;">
            <div style="font-size:2rem;font-weight:bold;color:#232946;text-shadow:1px 2px 0 #fff,2px 2px 0 #232946;">总角色数量</div>
            <div style="color:#888;font-size:1rem;margin-top:8px;">所有角色数量统计</div>
          </div>
          <div style="position:absolute;right:24px;bottom:24px;color:#3ecf8e;font-size:1.1rem;">↑ +12%</div>
        </div>
        <div class="stat-card" style="background:#fff;position:relative;">
          <div style="position:absolute;left:24px;top:24px;font-size:2.2rem;color:#3ecf8e;"><span>✔️</span></div>
          <div style="margin-left:64px;">
            <div style="font-size:2rem;font-weight:bold;color:#232946;text-shadow:1px 2px 0 #fff,2px 2px 0 #232946;">启用角色数量</div>
            <div style="color:#888;font-size:1rem;margin-top:8px;">当前可用的活跃角色</div>
          </div>
          <div style="position:absolute;right:24px;bottom:24px;color:#3ecf8e;font-size:1.1rem;">↑ +8%</div>
        </div>
        <div class="stat-card" style="background:#fff;position:relative;">
          <div style="position:absolute;left:24px;top:24px;font-size:2.2rem;color:#f7b731;"><span>❌</span></div>
          <div style="margin-left:64px;">
            <div style="font-size:2rem;font-weight:bold;color:#232946;text-shadow:1px 2px 0 #fff,2px 2px 0 #232946;">禁用角色数量</div>
            <div style="color:#888;font-size:1rem;margin-top:8px;">暂时停用的角色</div>
          </div>
          <div style="position:absolute;right:24px;bottom:24px;color:#f56c6c;font-size:1.1rem;">↓ -3%</div>
        </div>
      </div>
      <div class="table-section">
        <div class="section-title">角色列表</div>
        <table>
          <thead>
            <tr>
              <th><input type="checkbox" /></th>
              <th>角色名称</th>
              <th>角色编码</th>
              <th>状态</th>
              <th>用户数</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="checkbox" /></td>
              <td>数据分析师</td>
              <td>analyst</td>
              <td>启用</td>
              <td>12</td>
              <td>2025-07-29</td>
              <td class="table-actions">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
              </td>
            </tr>
            <tr>
              <td><input type="checkbox" /></td>
              <td>管理员</td>
              <td>admin</td>
              <td>禁用</td>
              <td>3</td>
              <td>2025-07-28</td>
              <td class="table-actions">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
        <div style="margin-top:16px; display:flex; justify-content: flex-end; gap: 8px;">
          <button class="btn btn-danger">批量删除</button>
          <button class="btn btn-primary">新增角色</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
